<template>
  <el-dialog v-dialogDrag :visible.sync="status" width="1085px" :close-on-click-modal="false" :before-close="resetFromDate">
    <span slot="title" class="dialog-title">工程信息</span>
    <div class="dialoginfo">
      <el-form ref="reffromDate" :rules="rules" :inline="true" :model="fromDate" label-width="110px" hide-required-asterisk>
        <div class="form-title">工程基本信息</div>
        <el-form-item prop="name">
          <span slot="label" style="color:#FF0000;">工程名称</span>
          <el-input v-model="fromDate.name" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item prop="place">
          <span slot="label" style="color:#FF0000;">地理位置</span>
          <el-input v-model="fromDate.place" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item prop="expectedAmount" label-width="160px">
          <span slot="label" style="color:#FF0000;">预估用砼量（方）</span>
          <el-input v-model="fromDate.expectedAmount" style="width: 176px;" placeholder="请输入" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="fromDate.expectedAmount=$regExp.checkNum(fromDate.expectedAmount)" @blur="fromDate.expectedAmount=$regExp.blurCheckNum(fromDate.expectedAmount)"></el-input>
        </el-form-item>
        <el-form-item prop="roadworkId">
          <span slot="label" style="color:#FF0000;">合同单位</span>
          <el-select v-model="fromDate.roadworkId" placeholder="请选择">
            <el-option v-for="(item, index) in roadworkIdList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="businessTypeId">
          <span slot="label" style="color:#FF0000;">业务类型</span>
          <el-select ref="businesName" v-model="fromDate.businessTypeId" placeholder="请选择" @change="$nextTick(()=>{fromDate2.businesName = $refs.businesName.selectedLabel})">
            <el-option v-for="(item, index) in businessTypeIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="type==1" prop="executePhase">
          <span slot="label" style="color:#FF0000;">执行阶段</span>
          <el-select v-model="fromDate.executePhase" placeholder="请选择">
            <el-option label="委托交底" :value="1"></el-option>
            <el-option label="评估" :value="2"></el-option>
            <el-option label="投标" :value="3"></el-option>
            <el-option label="合同交底" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">工程性质</span>
          <el-select ref="typeId" v-model="fromDate.typeId" placeholder="请选择" @change="$nextTick(()=>{fromDate.type = $refs.typeId.selectedLabel})">
            <el-option v-for="(item, index) in typeIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">项目进度</span>
          <el-select ref="rateOfProgressId" v-model="fromDate.rateOfProgressId" placeholder="请选择" @change="$nextTick(()=>{fromDate.rateOfProgress = $refs.rateOfProgressId.selectedLabel})">
            <el-option v-for="(item, index) in rateOfProgressIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label">起供时间</span>
          <el-date-picker v-model="fromDate.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <div>
          <el-form-item>
            <span slot="label">施工单位</span>
            <el-input v-model="fromDate.contractSigningUnit" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">联系人</span>
            <el-input v-model="fromDate.roadworklInkman" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="roadworkPhone">
            <span slot="label">电话</span>
            <el-input v-model="fromDate.roadworkPhone" type="Number" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">建设单位</span>
            <el-input v-model="fromDate.constructionUnit" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">联系人</span>
            <el-input v-model="fromDate.cuLinkman" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="cuPhone">
            <span slot="label">电话</span>
            <el-input v-model="fromDate.cuPhone" placeholder="请输入" type="Number" clearable></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <span slot="label">机会类型</span>
            <el-select ref="clientTypeId" v-model="fromDate.clientTypeId" placeholder="请选择" @change="$nextTick(()=>{fromDate.clientType = $refs.clientTypeId.selectedLabel})">
              <el-option v-for="(item, index) in clientTypeIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">行政区</span>
            <el-cascader v-model="fromDate.administrativeDistricts0" style="width:227px;" :options="treeData" filterable @change="administrativeDistrictsFun()"></el-cascader>
          </el-form-item>
        </div>
        <el-form-item>
          <span slot="label">管柱（米）</span>
          <el-input v-model="fromDate.tubularColumn" placeholder="请输入" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="fromDate.tubularColumn=$regExp.checkNum(fromDate.tubularColumn)" @blur="fromDate.tubularColumn=$regExp.blurCheckNum(fromDate.tubularColumn)"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">装配式</span>
          <el-input v-model="fromDate.fabricated" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <div>
          <el-form-item v-if="UserInfo.adminStatus == 1" prop="createUserId" :rules="[{required: true,message: '请选择负责人',trigger: 'change',}]" class="FZYdanWei">
            <span slot="label">负责人</span>
            <el-cascader ref="getCheckedNodes" v-model="fromDate.createUserId" style="width:227px;" :options="principalarr" :show-all-levels="false" :props="{ value: 'id', label: 'name' }" :placeholder="createUserName"></el-cascader>
          </el-form-item>
        </div>
        <el-form-item>
          <span slot="label">备注</span>
          <el-input v-model="fromDate.remark" style="width: 920px;" type="textarea" :rows="5" resize="none" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="bottom_all_two" @click="resetFromDate">取 消</el-button>
      <el-button class="bottom_all" style="margin-left: 24px;" @click="submitFromDate()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import treeData from '@/views/platform/ICPS/basicConfig/address.js';
import { QueryOneByid, queryAllByCompanyId } from "@/api/internetSales/chanceManagement.js";
import { orgUserTree, getDicType } from "@/api/common.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  data() {
    var landlinePhone = (rule, value, callback) => {
      if (value && !this.$regExp.landlinePhoneReg(value)) {
        return callback(new Error('电话格式错误！'));
      } else {
        callback();
      }
    };
    return {
      treeData,
      UserInfo: "",
      principalarr: [],
      createUserName: "",
      TreeSelectStypeNumber: 0,
      roadworkIdList: [],
      fromDate: { typeId: '', createUserId: '', roadworkId: '', name: '', place: '', roadworklInkman: '', roadworkPhone: '' },
      typeIdList: [],
      businessTypeIdList: [
        { itemName: "市场扩展", id: "1" },
      ],
      rateOfProgressIdList: [
        // { itemName: "立项规划阶段", id: "1" },
        // { itemName: "勘察设计阶段", id: "2" },
        // { itemName: "基础工程阶段", id: "3" },
        // { itemName: "主体结构阶段", id: "4" },
        // { itemName: "砌体工程阶段", id: "5" },
        // { itemName: "装饰工程阶段", id: "6" },
      ],
      clientTypeIdList: [],
      rules: {
        name: [{ required: true, message: "请输入工程名称", trigger: "change" }],
        place: [{ required: true, message: "请输入地理位置", trigger: "change" }],
        expectedAmount: [
          { required: true, message: "请输入预估用砼量", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "请选择工程类型", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择起拱", trigger: "change" },
        ],
        tubularColumn: [
          { required: true, message: "请输入管柱", trigger: "change" },
        ],
        fabricated: [
          { required: true, message: "请输入装配式", trigger: "change" },
        ],
        contractSigningUnit: [
          { required: true, message: "请选择施工单位", trigger: "change" },
        ],
        constructionUnit: [
          { required: true, message: "请输入建设单位", trigger: "change" },
        ],
        roadworklInkman: [
          { required: true, message: "请输入联系人", trigger: "change" },
        ],
        cuLinkman: [
          { required: true, message: "请输入联系人", trigger: "change" },
        ],
        roadworkId: [
          { required: true, message: "请输入合同单位", trigger: "change" },
        ],
        clientTypeId: [
          { required: true, message: "请选择客户类型", trigger: "change" },
        ],
        businessTypeId: [
          { required: true, message: "请选择业务类型", trigger: "change" },
        ],
        executePhase: [
          { required: true, message: "请选择执行阶段", trigger: "change" },
        ],
        roadworkPhone: [{ validator: landlinePhone, trigger: 'change' }],
        cuPhone: [{ validator: landlinePhone, trigger: 'change' }],
      },
    };
  },
  props: ["status", "sendData", "type", "executePhaseType"],
  watch: {
    async sendData() {
      if (this.sendData == "") {//工程管理点销售处登记
        console.log(11);
        this.fromDate = {};
        if (this.UserInfo.adminStatus == 0) {
          this.fromDate.createUserId = this.UserInfo.userId
          this.fromDate.createUserName = this.UserInfo.userRealName
        }
        console.log(this.fromDate);
        return;
      }
      console.log(this.sendData.dataType);
      if (this.type == 0) {//工程管理点修改-销售
        console.log(22);
        QueryOneByid({ id: this.sendData.id }).then((res) => {
          this.fromDate = { ...this.fromDate, ...res.data }
          this.fromDate.administrativeDistricts0 = JSON.parse(res.data.administrativeDistricts)[2]
          this.createUserName = res.data.createUserName
          this.fromDate.createUserId = ''
        });
      } else if (this.type == 1) {//销售机会点登记，
        console.log(33);
        this.fromDate = { ...this.fromDate, ...this.sendData }
        this.fromDate.id = ''
        this.fromDate.opportunityId = this.sendData.id
        this.fromDate.administrativeDistricts0 = JSON.parse(this.sendData.administrativeDistricts);
        this.createUserName = this.sendData.createUserName
      }
    },
    status() {
      // 重置表单
      if (this.sendData == "") {
        this.$data.fromDate = this.$options.data().fromDate;
      }
    }
  },
  async created() {
    this.treeData.forEach((v) => {
      v.children.forEach((res) => {
        res.children.forEach((res2) => {
          delete res2.children
        })
      })
    })
    console.log(this.treeData);
    this.UserInfo = getUserInfo();
    this.principalarr = await orgUserTree();
    getDicType({ code: "EngineeringNature" }).then((res) => {
      this.typeIdList = res.data.items;
    });
    getDicType({ code: "customerType" }).then((res) => {
      this.clientTypeIdList = res.data.items;
    });
    getDicType({ code: "ProjectProgress" }).then((res) => {
      this.rateOfProgressIdList = res.data.items;
    });
    queryAllByCompanyId().then((res) => {
      this.roadworkIdList = res.data
    });
  },
  methods: {
    administrativeDistrictsFun() {
      this.fromDate.administrativeDistricts = JSON.stringify(this.fromDate.administrativeDistricts0)
      this.$forceUpdate()
    },
    cz() {
      if (this.$refs.reffromDate) {
        this.$refs.reffromDate.clearValidate();
      }
    },
    copy(list) {
      let str = JSON.stringify(list);
      return JSON.parse(str);
    },
    resetFromDate() {
      let _this = this;
      _this.$emit("close");
    },
    submitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          _this.fromDate.businesName = _this.businessTypeIdList.find(function (
            obj
          ) {
            return obj.id == _this.fromDate.businessTypeId;
          }).itemName;
          _this.fromDate.roadwork = _this.roadworkIdList.find(function (
            obj
          ) {
            return obj.id == _this.fromDate.roadworkId;
          }).name;
          if (this.UserInfo.adminStatus == 0 && !this.fromDate.companyId) {//非admin默认使用当前账号信息里面的公司组织用户[并且是修改才赋值]
            this.fromDate.companyId = this.UserInfo.companyId
            this.fromDate.company = this.UserInfo.companyName
            this.fromDate.organizationId = this.UserInfo.organizationId
            this.fromDate.createUserId = this.UserInfo.userId
            this.fromDate.createUserName = this.UserInfo.userRealName
          } else if (this.UserInfo.adminStatus == 1) {//admin选择使用负责人里面的
            let size = this.$refs.getCheckedNodes.getCheckedNodes()[0].path.length
            this.fromDate.companyId = this.$refs.getCheckedNodes.getCheckedNodes()[0].path[0]
            this.fromDate.company = this.$refs.getCheckedNodes.getCheckedNodes()[0].pathLabels[0]
            this.fromDate.organizationId = this.fromDate.createUserId[size - 2]
            this.fromDate.createUserId = this.fromDate.createUserId[
              this.fromDate.createUserId.length - 1
            ];
            _this.fromDate.createUserName = this.$refs.getCheckedNodes.getCheckedNodes()[0].label
          }
          _this.$emit("sumbit", _this.fromDate);
          this.$data.fromDate = this.$options.data().fromDate
          this.$refs.reffromDate.clearValidate()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    TreeSelectStypeFun() {
      if (this.TreeSelectStypeNumber === 0) {
        this.TreeSelectStypeNumber = 1;
        setTimeout(() => {
          const dom = document.body.lastChild;
          dom.style.zIndex = '10000'
        }, 1000)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 227px;
}
.dialoginfo {
  padding: 0;
}
.form-title {
  font-size: 18px;
  margin: 10px 0;
}
</style>
